<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import WordCount from "./WordCount.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { Input } from "../Input";

    const { Story } = defineMeta({
        title: "Components/Other/WordCount",
        component: WordCount,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
    let value = $state("");
    let value2 = $state("");
    let value3 = $state("");
</script>

<Story name="Default">
    {#snippet template(args)}
        <Input type="textarea" bind:value />
        <WordCount total={10} {value} />
    {/snippet}
</Story>

<Story name="Text">
    {#snippet template(args)}
        <Input type="textarea" bind:value={value2} />
        <WordCount total={10} value={value2} overflow prefix={"已输入"} prefixOverflow={"已超出"} suffixOverflow={"个字"} suffix={"个字"} />
    {/snippet}
</Story>

<Story name="Circle">
    {#snippet template(args)}
        <Input type="textarea" bind:value={value3} />
        <WordCount total={10} value={value3} circle />
    {/snippet}
</Story>
